<template>
  <router-search-page class="container">
    <template v-slot:search>
      <company-list ref="typeList" v-model="systemDict" url="/Sys/SysDict/selectListParent"
                    @change="onDictTypeChange">
        <template v-slot:header>
          <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="newType">新增</el-button>
          </el-row>
        </template>
      </company-list>
    </template>
    <!-- table -->
    <ui-table v-bind="table.config" ref="table" class="content_container" @select-change="onSelectTableEntity"
              :params="systemDict ? {id: systemDict.id, upIds: systemDict.upIds} : null">
      <!--   查询   -->
      <template v-slot:search-bar>
        <ui-table-select :reset="true">
          <ui-table-select-item name="label" label="显示值" show-label type="text" :show-word-limit="false" />
<!--          <ui-table-select-item name="id" :value="systemDict.id" type="hidden"></ui-table-select-item>-->
<!--          <ui-table-select-item name="upIds" :value="systemDict.upIds" type="hidden"></ui-table-select-item>-->
        </ui-table-select>
      </template>
      <!--   操作   -->
      <template v-slot:tool-bar>
        <el-button type="primary" icon="el-icon-plus" @click="handleEntityCreate(systemDict)">新增</el-button>
      </template>
      <!--      <ui-table-column type="selection"/>-->
      <ui-table-column prop="label" label="显示值" />
      <ui-table-column prop="code" label="编码" min-width="250" />
      <ui-table-column prop="value" label="保存值" min-width="150" />
      <ui-table-column prop="sort" label="排序" min-width="100" />
      <ui-table-column type="action" :buttons="table.buttons" :resizable="false" />
      <!--   分页   -->
      <!--<template v-slot:footer-bar>-->
      <!--  <ui-table-pagination/>-->
      <!--</template>-->
    </ui-table>
    <!-- form -->
    <ui-form-dialog ref="form" :title="form.title" :url="form.url" :loading="entityGetLoading" :visible.sync="form.visible" class="entity-form" @after-submit="afterFormSubmit">
      <ui-form-item name="id" label="ID" type="hidden" />
      <ui-form-item name="upId" label="upId" type="hidden" />
      <ui-form-item name="upName" label="上级类型" type="text" :disabled="true" v-if="form.isCreate" />
      <ui-form-item name="label" label="显示值" type="text" vtype="required" />
      <ui-form-item name="value" label="保存值" type="text" vtype="required" :disabled="!form.isCreate" />
      <ui-form-item name="sort" label="排序" type="number" vtype="required" :defaultValue="50" :min="1" />
    </ui-form-dialog>

    <ui-form-dialog title="新增" :url="api.createParent" :visible.sync="typeForm.visible" @after-submit="afterTypeFormSubmit">
      <ui-form-item name="label" label="名称" type="text" vtype="required" />
      <ui-form-item name="code" label="编码" type="text" vtype="required" />
    </ui-form-dialog>
  </router-search-page>
</template>
<script>

import CompanyList from '../Components/list_Dict';
import routerSearchPage from '../Components/search'
import {mapState} from "vuex";

const SystemDict = {
  components: { CompanyList, routerSearchPage },
  API: {
    create: '/Sys/SysDict/create',
    createParent: '/Sys/SysDict/createParent',
    update: '/Sys/SysDict/update',
    delete: '/Sys/SysDict/delete',
    select: '/Sys/SysDict/select',
    createList: '/Sys/SysDict/createList',
    updateList: '/Sys/SysDict/updateList',
    deleteList: '/Sys/SysDict/deleteList',
    selectList: '/Sys/SysDict/selectList',
    selectPage: '/Sys/SysDict/selectPage',
    selectByUpIdAndCode: '/Sys/SysDict/selectByUpIdAndCode',
  },
  data () {
    return {
      api: SystemDict.API,
      table: {
        config: {
          initLoad: false,
          url: SystemDict.API.selectByUpIdAndCode,
        },
        buttons: [
          // (row) => ({ text: '新增', handle: this.handleEntityCreate }),
          (row) => ({ text: '修改', handle: this.handleEntityUpdateRow }),
          () => ({text: '删除', handle: this.handleEntityDeleteRow}),
        ],
      },
      systemDict: {},
      form: {
        isCreate: true,
        title: '新增',
        url: SystemDict.API.create,
        visible: false,
        rules: {},
      },
      typeForm: {
        visible: false,
      },
    };
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    newType () {
      this.typeForm.visible = true;
    },
    onDictTypeChange () {
      this.$nextTick(() => {
        this.reloadTable();
      });
    },
    onSelectTableEntity (selects) {
      if (selects.length <= 0) {
        return;
      }
      this.handleEntityUpdateRow(selects[selects.length - 1]);
    },
    handleEntityCreate (SystemDict) {
      if (!SystemDict.id) {
        this.$message.info('请选择字段类型');
        return;
      }

      this.form.title = '新增';
      this.form.url = this.api.create;
      this.form.visible = true;
      this.form.isCreate = true;
      this.$nextTick(() => {
        this.$refs.form.resetValues({ upId: SystemDict.id, upName: SystemDict.name });
      });
    },
    handleEntityUpdate () {
      const sels = this.$refs.table.getSelection();
      if (sels.length !== 1) {
        this.$message.info('请选择要修改的数据');
        return;
      }
      this.handleEntityUpdateRow(sels[0]);
    },
    handleEntityDelete () {
      const sels = this.$refs.table.getSelection();
      if (sels.length <= 0) {
        this.$message.info('请选择要删除的数据');
        return;
      }
      this.deleteEntities(sels.map(item => item.id)).then(({ success }) => {
        if (!success) {
          return;
        }
        this.reloadTable();
      });
    },
    handleEntityUpdateRow (row) {
      this.form.title = '修改';
      this.form.url = this.api.update;
      this.form.visible = true;
      this.form.isCreate = false;
      this.selectEntity(row.id).then(({ success, data }) => {
        if (!success) {
          this.form.visible = false;
          return;
        }
        this.$refs.form.resetValues(data);
      });
    },
    handleEntityDeleteRow (row) {
      this.deleteEntity(row.id).then(({ success }) => {
        if (!success) {
          return;
        }
        this.reloadTable();
      });
    },
    reloadTable () {
      this.$refs.table && this.$refs.table.reload();
    },
    afterFormSubmit ({ success }) {
      if (!success) {
        return;
      }
      this.form.visible = false;
      this.reloadTable();
    },
    afterTypeFormSubmit ({ success }) {
      if (!success) {
        return;
      }
      this.typeForm.visible = false;
      this.$refs.typeList.loadData();
    },
  },
};
export default SystemDict;
</script>
<style lang="less" scoped>
</style>
